<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <span>Add a todo</span>
        <input type="text" v-model="newtodo" />
        <button @click="AddTodo">Add</button>
        <ul>
            <li v-for="(todo,i) in todos" :key="i">
                <span>{{todo}}</span>
                <button @click="RemoveTodo(i)">Remove</button>
            </li>
        </ul>
    </div>

    <script>
        const options = {
            data() {
                return {
                    newtodo:"",
                    todos:[
                        "Do the dishes",
                        "Take out the trash",
                        "Move the lawn",
                    ]
                }
            },
            methods: {
                AddTodo(){
                    this.todos.push(this.newtodo)
                },
                RemoveTodo(index){
                    this.todos.splice(index,1)
                }
            },
        }

        const vm = Vue.createApp(options).mount('#app')
    </script>
</body>
</html>